<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui.dtree帮助手册</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script type="text/javascript" src="../layui/layui.js"></script>

<link rel="stylesheet" href="../layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../layui_ext/dtree/font/dtreefont.css">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="online.css">
<link rel="stylesheet" href="global.css">
<style type="text/css">
#test{position: absolute;max-height: 500px;height: 350px;overflow: auto;width: 100%;z-index: 123;display: none;border:1px solid silver;top: 42px;}
.layui-show{display: block!important;}
</style>
<script type="text/javascript">
	layui.extend({
		dtree: '{/}../layui_ext/dtree/dtree'
	}).use(['element','layer', 'table', 'code' ,'util', 'dtree', 'form'], function(){
		var element = layui.element,
			layer = layui.layer,
			table = layui.table,
			util = layui.util,
			dtree = layui.dtree,
			form = layui.form,
			$ = layui.$;
		
		$("#run_demo_btn").click(function(){
			var ifr = document.getElementById("demo_iframe");  
			var code = $("#demo_textarea").val();
			ifr.contentWindow.document.body.innerHTML = "";
			ifr.contentWindow.document.write(code);
		});
		
		$(".url_btn").click(function(){
			var data_url = $(this).attr("data-url");
			layer.open({
				type: 2,
				title: "url和data示例",
				area: ["40%","90%"],
				content: data_url
			})
		})
		
	});
</script>
</head>
<body>

<div class="layui-layout layui-layout-admin">
	<fieldset class="layui-elem-field layui-field-title">
	  <legend>数据/URL&配置项准备（或者你可以直接将前面的案例演示中的代码直接粘贴至此，注意ID的修改即可。）</legend>
	  <div class="layui-field-box">
	  	<button class="layui-btn layui-btn-xs url_btn" data-url="url/dataAndUrl1.html" style="margin-left: 5px;">dtree标准数据集</button>
	  	<button class="layui-btn layui-btn-xs url_btn" data-url="url/dataAndUrl2.html">常用格式+list风格数据集</button>
	  	<button class="layui-btn layui-btn-xs url_btn" data-url="url/dataAndUrl3.html">一级复选框数据集</button>
	  	<button class="layui-btn layui-btn-xs url_btn" data-url="url/dataAndUrl4.html">两级复选框标准数据集</button>
	  	<button class="layui-btn layui-btn-xs url_btn" data-url="url/dataAndUrl5.html">使用recordData数据集</button>
	  	<button class="layui-btn layui-btn-xs url_btn" data-url="url/dataAndUrl6.html">自定展开节点数据集</button>
	  	<button class="layui-btn layui-btn-xs url_btn" data-url="url/dataAndUrl7.html">隐藏节点数据集</button>
	  	<button class="layui-btn layui-btn-xs url_btn" data-url="url/dataAndUrl8.html">禁用节点数据集</button>
	  </div>
	</fieldset>
	<div class="layui-body site-demo">
		<form id="demo_form">
			<div class="site-demo-editor">
				<div class="site-demo-area">
					<textarea id="demo_textarea" name="html" spellcheck="false" placeholder="在此输入代码">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui.dtree帮助手册</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script type="text/javascript" src="../layui/layui.js"></script>

<link rel="stylesheet" href="../layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../layui_ext/dtree/font/dtreefont.css">
</head>

<body>
  <div class="container">
    <div class="layui-row layui-col-space10">
      <div class="layui-fluid">
        <fieldset class="layui-elem-field layui-field-title">
          <legend>在线示例</legend>
            <div class="layui-field-box">
              <div class="layui-row layui-col-space10" style="margin-top: 10px;">
               <div class="layui-col-xs12">
                  <div id="toolbarDiv" style="overflow: auto">
                    <ul id="demoTree" class="dtree" data-id="0"></ul>
                  </div>
               </div>
             </div>
           </div>
         </fieldset>
       </div>
     </div>
   </div>
</body>

<script type="text/javascript">
  layui.extend({
    dtree: '{/}../layui_ext/dtree/dtree'
  }).use(['element','layer', 'table', 'code' ,'util', 'dtree', 'form'], function(){
    var element = layui.element, layer = layui.layer, table = layui.table, util = layui.util, dtree = layui.dtree, form = layui.form, $ = layui.$;
		
    var data = [
{"id":"001", "title": "湖南省", "last": false, "parentId": "0", 
 "children":[
    {"id":"001001", "title": "长沙市", "last":true, "parentId": "001"},
    {"id":"001002", "title": "株洲市", "last":true, "parentId": "001"},
    {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001"},
    {"id":"001004", "title": "衡阳市", "last":true, "parentId": "001"},
    {"id":"001005", "title": "郴州市", "last":true, "parentId": "001"}]},
{"id":"002", "title": "湖北省", "last": false, "parentId": "0", 
 "children":[
    {"id":"002001", "title": "武汉市", "last":true, "parentId": "002"},
    {"id":"002002", "title": "黄冈市", "last":true, "parentId": "002"},
    {"id":"002003", "title": "潜江市", "last":true, "parentId": "002"},
    {"id":"002004", "title": "荆州市", "last":true, "parentId": "002"},
    {"id":"002005", "title": "襄阳市", "last":true, "parentId": "002"}]},
{"id":"003", "title": "广东省", "last": false, "parentId": "0", 
 "children":[
    {"id":"003001", "title": "广州市", "last":false, "parentId": "003", 
     "children":[
      {"id":"003001001", "title": "天河区", "last":true, "parentId": "003001"},
      {"id":"003001002", "title": "花都区", "last":true, "parentId": "003001"}]},
    {"id":"003002", "title": "深圳市", "last":true, "parentId": "003"},
    {"id":"003003", "title": "中山市", "last":true, "parentId": "003"},
    {"id":"003004", "title": "东莞市", "last":true, "parentId": "003"},
    {"id":"003005", "title": "珠海市", "last":true, "parentId": "003"},
    {"id":"003006", "title": "韶关市", "last":true, "parentId": "003"}]},
{"id":"004", "title": "浙江省", "last": false, "parentId": "0", 
 "children":[
    {"id":"004001", "title": "杭州市", "last":true, "parentId": "004"},
    {"id":"004002", "title": "温州市", "last":true, "parentId": "004"},
    {"id":"004003", "title": "绍兴市", "last":true, "parentId": "004"},
    {"id":"004004", "title": "金华市", "last":true, "parentId": "004"},
    {"id":"004005", "title": "义乌市", "last":true, "parentId": "004"}]},
{"id":"005", "title": "福建省", "last": false, "parentId": "0", 
 "children":[
    {"id":"005001", "title": "厦门市", "last":true, "parentId": "005" }]
}];
		
    var DTree = dtree.render({
      elem: "#demoTree",
      data: data
//    url: "please input your url"
    });
		
    dtree.on("node(demoTree)", function(obj){
      layer.msg(JSON.stringify(obj.param));
    })
  });
</script>
</html>
					</textarea>
				</div>
				<div class="site-demo-btn">
					<button type="button" class="layui-btn" id="run_demo_btn">运行代码</button>
				</div>
			</div>
		</form>
		<div class="site-demo-result">
			<iframe frameborder="0" id="demo_iframe" name="demo_iframe" src="iframe.html"/>
		</div>
	</div>
</div>
</body>
</html>